<template>
  <div id="app" >
    <div v-transfer-dom>
      <loading v-model="isLoading"></loading>
    </div>
    <view-box ref="viewBox">
      <!-- <x-header slot="header" style="width: 100%;position: absolute;left: 0rem;top: 0rem;z-index: 100;" :left-options="leftOptions" :title="title" @on-click-title="scrollTop" :right-options="{showMore: true}" @on-click-more="showMenus = true"></x-header> -->
      <transition class="vux-pop-in">
        <router-view></router-view>
      </transition>
    </view-box>
  </div>
</template>
<script>
import { ViewBox, Loading,TransferDom } from 'vux'
import wxConfig from '@/utils/wxConfig'
import { mapActions, mapGetters, mapState} from 'vuex'
// import wxConfig from '@/utils/wxConfig'
import {removeStore} from '@/config/mUtils'
export default {
  name: 'app',
  directives: {
    TransferDom
  },
  components: {
    ViewBox,
    Loading
  },
  beforeCreate(){
    wxConfig()
  },
  mounted () {
    // this.hander = () => {
    //   this.scroll(this.$refs.viewBox.getScrollTop())
    // }
    // this.box = this.$refs.viewBox.getScrollBody()
    // this.box.addEventListener('scroll', this.hander, false)
  },
  destroyed () {
    removeStore('wxcode')
  },
  computed: {
    ...mapGetters([
      // 'getScroll',
      'getHeadTitle'
    ]),
    ...mapState({
      'isLoading': state=>state.app.isLoading
    })
  },
  methods: {
    ...mapActions([
      // 'scroll',
      // 'getWxCode'
    ]),
  },
  metaInfo(){
    // 设置应用标题
    return {
      title: this.$route.name || this.getHeadTitle
    }
  }
}
</script>
<style>
/* #app .vux-header{
  background-color:  #000;
} */
#app .vux-header .vux-header-left a{
  color: #fff;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height:100%;
}
#app #vux_view_box_body
{
  padding-top:0px;
  padding-bottom: 1.85rem;
}
</style>